<template>
	<view class="content">
		<view class="" v-for="(m,idx) in main" :key="idx">


			<image :src="m.LinkImage" mode="aspectFill" class="himg"></image>
			<scroll-view scroll-x="true" class="scroll">
				<view :class="['scrolls',{scrolls0:index==commodityList.length-1}]" v-for="(item,index) in commodityList" :key="index">
					<image :src="item.ImageSrc" mode="aspectFill" class="scrollsImg float-l" @tap="navigatorTo(item.Href)"></image>
					<view class="scrollss float-r">
						<view class="scrName fs12 color3">{{item.CommodityName}}</view>
						<view class="footer clear-both">
							<view class="float-l footers">
								<text class="fs16 colorm">¥{{item.DiscountPrice?item.DiscountPrice:item.UnitPrice}}</text>
								<text class="fs14 color9">/{{item.Size}}</text>
							</view>
							<view class="float-r footers" @tap="openCartBox(item)">
								<image src="/static/tabbar/index/goods_fill.png" class="footerImg"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="title fs18 color3">
				{{m.ItemTitle}}
				<button class="float-r text-center fex" open-type="share" v-show="isMpweixin">
					<text class="fs12 color9">分享</text>
				</button>
			</view>
			<view class="info fs12 colorFF6">{{m.Remarks}}</view>
			<view class="iofos" v-show="m.Contents">
				<u-parse :content="m.Contents" @imageProp="imageProp" @loading="loading" />
			</view>
			<!-- <view class="iofos fs14 color6">热乎乎松软的比利时华夫饼，搭配蓝莓果酱，好吃的超乎想象。再加上香喷喷的烤肠和乳酪条提供优质蛋白质来源，活力一整天。这样丰富的早餐只要5分钟就可以搞定，简直就是工作日爱睡懒觉人群的福音。</view>
		<view>
			<view class="detil">
				<view class="fs14 color3">食材主料：</view>
				<view class="detils fs14 color6">华夫饼、德国香肠、乳酪条、杏鲍菇、培根、鸡蛋、土豆、萨拉米肠</view>
			</view>
			<view class="detil">
				<view class="fs14 color3">食材辅料：</view>
				<view class="detils fs14 color6">蓝莓酱、番茄酱、黑胡椒碎、海盐</view>
			</view>
			<view class="detil">
				<view class="fs14 color3">制作过程：</view>
				<view class="detilst fs14 color6">步骤1/3</view>
				<view class="detils fs14 color6"> 平底锅放少许油，先将培根、香肠下锅油煎。 </view>
				<view class="detilst fs14 color6">步骤2/3</view>
				<view class="detils fs14 color6"> 约3分钟后再放入备好的土豆丁、杏鲍菇丁让其充分吸 收带有肉香的油脂。同时准备华夫饼及其他食材。 </view>
				<view class="detilst fs14 color6">步骤3/3</view>
				<view class="detils fs14 color6"> 大约6分钟均匀撒入少许黑胡椒碎与海盐后再捞起所有 食材，用锅内剩余油脂做一个煎蛋，完成。</view>
			</view>
		</view> -->
			<!-- <view class="option clear-both">
			<view class="options float-r" @click="option()"><text class="colorFF6 fs14">{{options.text}}</text><image :src="options.icon" class="optImg"></image></view>
		</view>
		<view class="comment">
			<view :class="['comments',{comments0:index==commentList.length-1}]" v-for="(item,index) in commentList" :key="index">
				<text class="fs14 color3">{{item.name}}：</text>
				<text class="fs14 color9">{{item.info}}</text>
			</view>
		</view> -->
			<!-- <view class="fixed clear-both">
			<view class="float-l clear-both">
				<image src="../../static/tabbar/index/collection.png" class="fixedImg float-l"></image>
				<text class="fs12 color3 float-l">123</text>
			</view>
			<view class="float-r clear-both">
				<view class="float-l clear-both">
					<image src="../../static/tabbar/index/like.png" class="fixedImg float-l"></image>
					<text class="fs12 color3 float-l mr">123</text>
				</view>
				<view class="float-l">
					<image src="../../static/tabbar/index/message.png" class="fixedImg float-l"></image>
					<text class="fs12 color3 float-l mr">123</text>
				</view>
				<view class="float-l">
					<image src="../../static/tabbar/index/praise.png" class="fixedImg float-l"></image>
					<text class="fs12 color3 float-l">123</text>
				</view>
			</view>
		</view> -->
			<view class="shopcar_btn" @tap="navigatorTo('/pages/tabBar/index')">
				<image src="/static/tabbar/index/homepage.png" mode="aspectFill" class="publish_fill"></image>
			</view>
			<!--购物车弹窗-->
			<view class="main" v-show="showCartBox">
				<view class="white-box">
					<view v-for="(box,idx) in packageList" :key="idx" v-show="box.PackageName==choosepackagename">
						<image src="/static/tabbar/index/close.png" mode="aspectFill" class="colose-img" @tap="closeCartBox"></image>
						<view class="header clear-both">
							<image :src="box.ImagrUrl" mode="aspectFill" class="float-l cake-img"></image>
							<view class="float-l cakeinfo">
								<view>
									<text class="fs20 colorm font-weight">¥{{box.DiscountPrice||box.UnitPrice}}</text><text class="fs14 color9">/{{box.Size}}</text>
								</view>
								<view class="fs16 color3 font-weight cake-name"><text>{{box.CommodityName}}</text></view>
								<view class="fs14">
									<text class="colorFF6">已选择：</text>
									<text class="color6">{{box.PackageName}}</text>
								</view>
							</view>
						</view>
						<view class="guige clear-both">
							<view class="fs16 font-weight color3">规格</view>
							<view class="fs12 item float-l " v-for="(s,index) in box.PackageNameList" :key="index" :class="{'choose':s==choosepackagename}"
							 @tap="chooseCartBox(s)">{{s}}</view>
						</view>
						<view class="num clear-both">
							<view class="float-l fs16 font-weight color3">数量</view>
							<view class="float-r clear-both">
								<view class="float-l fs20 color6 options" @tap="updateCartNum(box,-1)">-</view>
								<view class="float-l fs14 color3 nums">{{box.Num}}</view>
								<view class="float-l fs20 colorFF6 options options2" @tap="updateCartNum(box,1)">+</view>
							</view>
						</view>
						<view class="bigview clear-both">
							<view class="shopcar_btns float-l text-center" @tap="goHref('/pages/tabBar/cart')">
								<image src="/static/tabbar/index/publish2.png" mode="aspectFill" class="shopcar_btn_img"></image>
								<view class="fs14 color9">购物车</view>
								<view class="dot fs12 text-over">{{cartNum}}</view>
							</view>
							<view class="done fs18 font-weight  float-l" @tap="addTocart(box)">加入购物车</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script src="../../api/subject/subject_item_eat.js">

</script>
</script>
<style lang="scss" scoped="true">
	.content {
		padding-bottom: 19.5vw;

		.himg {
			width: 100%;
			height: 53.334vw;
			display: block;
		}

		.scroll {
			margin-top: 6.4vw;
			width: 100%;
			height: 29vw;
			white-space: nowrap;

			.scrolls {
				display: inline-block;
				height: 24vw;
				width: 69vw;
				box-shadow: 0 .5vw 1.334vw rgba(0, 0, 0, 0.15);
				border-radius: 1.6vw;
				overflow: hidden;
				margin-left: 4.2667vw;

				.scrollsImg {
					width: 24vw;
					height: 24vw;
					display: block;
				}

				.scrollss {
					width: 45vw;

					.scrName {
						margin: 2.4vw 2.4vw 0 2.4vw;
						height: 9.6vw;
						white-space: normal;
					}

					.footer {
						margin: 4.5334vw 2.4vw 0 2.4vw;
						height: 5.8667vw;
						line-height: 5.8667vw;

						.footers {
							height: 100%;

							.footerImg {
								width: 5.8667vw;
								height: 5.8667vw;
								display: block;
							}
						}

					}
				}
			}

			.scrolls0 {
				margin-right: 4.2667vw;
			}
		}

		.title {
			width: 92vw;
			margin-left: 4.2667vw;
			height: 4.8vw;
			line-height: 4.8vw;
			margin-top: 4.5vw;
			padding-left: 1.334vw;
			border-left: .8vw solid #00449F;
			position: relative;
		}

		.info {
			width: 88vw;
			margin: 0 auto;
			margin-top: 2.9334vw;
			padding: 1.8667vw;
			background: #E5ECF5;
			border-radius: 1.6vw;
		}

		.iofos {
			width: 92vw;
			margin: 0 auto;
			margin-top: 3.4667vw;
		}

		.option {
			margin-top: 3.4667vw;

			.options {
				margin-right: 4.2667vw;

				.optImg {
					width: 4.2667vw;
					height: 4.2667vw;
					margin-left: 1.0667vw;
				}
			}
		}

		.comment {
			width: 91.4667vw;
			background: #FAFAFA;
			margin: 0 auto;
			margin-top: 7.4667vw;
			border-radius: 2.1334vw;
			padding: 3.4667vw 0;

			.comments {
				padding-bottom: 2.667vw;
				margin-left: 3.2vw;
			}

			.comments0 {
				padding-bottom: 0;
			}
		}

		.detil {
			width: 92vw;
			margin: 0 auto;
			margin-top: 8.5334vw;

			.detilst {
				margin-top: 8.5334vw;
			}

			.detils {
				margin-top: 2.667vw;
			}
		}

		.fixed {
			position: fixed;
			z-index: 9999;
			background: #fff;
			width: 91.4666vw;
			height: 13.8667vw;
			line-height: 13.8667vw;
			border-top: 2upx solid #E1E1E1;
			left: 0;
			bottom: 0;
			padding: 0 4.2667vw;

			.fixedImg {
				width: 4.2667vw;
				height: 4.2667vw;
				margin-top: 4.8vw;
				margin-right: 1.0667vw;
				display: block;
			}

			.mr {
				margin-right: 7.4667vw;
			}
		}

		.main {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.5);

			.white-box {
				min-height: 107vw;
				background: #fff;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				border-top-left-radius: 4.2667vw;
				border-top-right-radius: 4.2667vw;
				overflow: hidden;
				padding-bottom: 13.8667vw;
				animation: height .4s;

				.colose-img {
					position: absolute;
					width: 5.8667vw;
					height: 5.8667vw;
					right: 4.2667vw;
					top: 4.2667vw;
					z-index: 10;
				}

				.header {
					height: 26.667vw;
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.cake-name {
						margin: 1vw 0;
					}

					.cake-img {
						height: 26.667vw;
						width: 26.667vw;
						margin-right: 3vw;
					}

					.cakeinfo {
						height: 26.667vw;
						width: 61.6vw;
					}
				}

				.guige {
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.item {
						height: 7.4667vw;
						line-height: 7.4667vw;
						border-radius: 3.7334vw;
						background: #f2f2f2;
						color: #666;
						padding: 0 4.8vw;
						margin-top: 3.2vw;
						margin-right: 2.1334vw;
					}

					.choose {
						background: #E5ECF5;
						color: #00449F;
					}

					.unchoose {
						color: #BCBCBC;
					}
				}

				.num {
					height: 6.4vw;
					margin: 4vw 4.2667vw 8.5334vw 4.2667vw;
					line-height: 6.4vw;

					.options {
						width: 6.4vw;
						height: 6.4vw;
						border: 2upx solid #e7e7e7;
						text-align: center;
						border-top-left-radius: .8vw;
						border-bottom-left-radius: .8vw;
					}

					.options2 {
						border-radius: 0;
						border-top-right-radius: .8vw;
						border-bottom-right-radius: .8vw;
					}

					.nums {
						width: 10.667vw;
						text-align: center;
						border-top: 2upx solid #e7e7e7;
						border-bottom: 2upx solid #e7e7e7;
						height: 6.4vw;
						line-height: 6.4vw;
					}
				}

				.bigview {
					position: absolute;
					bottom: 0;
					left: 0;

					.shopcar_btns {
						width: 20vw;
						background: #fff;
						height: 13.8667vw;
						position: relative;

						.shopcar_btn_img {
							width: 8vw;
							height: 8vw;
							display: block;
							margin: 0 auto;
							margin-top: 1vw;
							margin-bottom: -1vw;
						}

						.dot {
							background: #CC2825;
							color: #fff;
							position: absolute;
							width: 5vw;
							height: 5vw;
							text-align: center;
							line-height: 5vw;
							right: 4vw;
							top: 0;
							border-radius: 50%;
							z-index: 2;
						}
					}

					.done {
						height: 13.8667vw;
						line-height: 13.8667vw;
						text-align: center;
						width: 80vw;
						color: #fff;
						background: #00449F;
					}

					.nodone {
						color: rgba(255, 255, 255, .5);
					}
				}
			}
		}

		.shopcar_btn {
			width: 10.667vw;
			height: 10.667vw;
			border-radius: 50%;
			position: fixed;
			right: 3vw;
			bottom: 10vw;
			z-index: 9;
			box-shadow: 0 4upx 8upx 0 rgba(0, 68, 159, 0.33);
			background: #00449F;

			.dot {
				background: #CC2825;
				color: #fff;
				position: absolute;
				width: 5vw;
				height: 5vw;
				text-align: center;
				line-height: 5vw;
				right: 0;
				top: 0;
				border-radius: 50%;
				z-index: 2;
			}

			.publish_fill {
				width: 6.667vw;
				height: 6.667vw;
				display: block;
				margin: 2vw auto;
			}
		}

		@keyframes height {
			from {
				bottom: -100%;
			}

			to {
				bottom: 0;
			}
		}
		.fex {
			margin-right: 4.2667vw;
			line-height: 6vw;
			background-color: #fff;
			padding: 0;
			position: absolute;
			right: 0;
			top: 0vw;
		}
		
		.fex::after {
			border: none;
			outline: none;
		}
		
		.header-img {
			width: 7.4667vw;
			height: 7.4667vw;
			display: block;
		}
	}
</style>
